<template>
    <div class="newsinfo-container">
        <h4 class="title">{{newsinfo.title}}</h4>
        <p class="subtitle">
            <span>发表时间:{{newsinfo.add_time|dataFormat}}</span>
            <span>点击次数:{{newsinfo.click}}</span>
        </p>

        <hr>
        <!-- //这是内容区 -->
        <div class="content" v-html="newsinfo.content"></div>
           <!-- 评论区子组件 -->
            <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return{
            id:this.$route.params.id,  //把URL里面的那个ID拿过来，然后这边获取数据，进行ID比对
            newsinfo:{},
        }
    },
    created(){
        this.getNewsInfo();
    },
    methods:{
        getNewsInfo(){
            this.$http.get('http://www.liulongbin.top:3005/api/getnew/'+this.id).then(result=>{
                if(result.body.status === 0){
                    this.newsinfo = result.body.message[0]
                    //      
                }else{
                    Toast('获取新闻信息失败')
                }
            })
        }
    },
    components:{
        'comment-box':comment
    }
}
</script>

<style >
.newsinfo-container{
    padding: 0 4px
}
.title{
    font-size: 16px;
    text-align: center;
    margin: 10px 0;
    color: red;
}
.newsinfo-container.subtitle{
    font-size: 12px;
    color: blue;
    display: flex;
    justify-content: space-between;
    
}
.content img{
    width: 100%

}



</style>

